import axios from "axios"
import md5 from 'md5'
import { TranslationOutlined } from '@ant-design/icons'
import { Select, Input, Button, message } from 'antd'
import type React from "react";
import { useState } from "react";
const { TextArea } = Input;
interface optionsType {
	value: string,
	label: string
}
const List: React.FC = () => {
	const LanguageOptions: optionsType[] = [
		{ value: 'ar', label: '阿拉伯语' },
		{ value: 'de', label: '德语' },
		{ value: 'en', label: '英语' },
		{ value: 'es', label: '西班牙语' },
		{ value: 'fr', label: '法语' },
		{ value: 'hi', label: '	印地语' },
		{ value: 'id', label: '	印度尼西亚语' },
		{ value: 'it', label: '意大利语' },
		{ value: 'ja', label: '日语' },
		{ value: 'ko', label: '韩语' },
		{ value: 'ru', label: '	俄语' },
	]
	const [toValue, setToValue] = useState<string>('')
	const [inputValue, setInputValue] = useState<string>('')
	const [outPutValue, setOutPutValue] = useState<string>('')
	const getYoudao = async () => {
		if (inputValue.trim() === '') {
			message.error('请输入要翻译的文本内容')
		}
		let salt = new Date().getTime()
		let sign = md5(
			'387742c5d1ea787f' + inputValue + salt + 'JmjUmGQt4pW3K7CJRlmM2k3Hp9rkdLQ3'
		)
		const res = await axios.get('/ocrapi/api', {
			params: {
				q: inputValue,
				from: 'auto',
				to: toValue,
				appKey: '387742c5d1ea787f',
				salt,
				sign,
			}
		})
		setOutPutValue(res.data.translation[0])
	}
	// 监听select 事件函数
	const handleChangeOption = (value: string) => {
		setToValue(value)
	}
	// 输入框的值发生改变的时候
	const TextHandleValue = (event: any) => {
		setInputValue(event.target.value)
	}
	const startTransition = () => {
		getYoudao()
	}
	// 清空
	const clearHandle = () => {
		setInputValue('')
		setOutPutValue('')
	}
	// 复制结果
	const copyResultHandler = () => {
		if (outPutValue) {
			// 复制文本到剪贴板
			navigator.clipboard.writeText(outPutValue).then(() => {
				message.success('复制成功')
			}).catch((error) => {
				console.log(error)
				message.error('复制失败')
			})
		} else {
			message.warning('翻译结果为空，无法复制！')
		}
	}
	return (
		<div className="content">
			<header className="headerL">
				<h1>
					<TranslationOutlined />
					<span>中文文本翻译工具</span>
				</h1>
				<p>将中文文本转译为其他语言</p>
			</header>
			<main className="main">
				<h2>文本翻译</h2>
				<div className="luangrageText">目标语言:</div >
				<Select
					className="select"
					defaultValue="英语"
					style={{ width: 120 }}
					onChange={handleChangeOption}
					options={
						LanguageOptions.map((item) => {
							return { value: item.value, label: item.label }
						})
					}
				/>
				<div className="textEaer">
					<div className="textEaer-item">
						<span className="textEaer-item-text">中文文本:</span>
						<TextArea rows={12} placeholder="请输入要翻译的中文文本..." value={inputValue} onChange={TextHandleValue} />
					</div>
					<div className="textEaer-item">
						<span className="textEaer-item-text">翻译结果:</span>
						<TextArea rows={12} placeholder="翻译结果将在这里显示..." value={outPutValue} />
					</div>
				</div>
			</main>
			<footer className="footer">
				<div className="fbtn">
					<Button onClick={startTransition} type="primary"><span>{<TranslationOutlined />}</span>开始翻译</Button>
					<Button onClick={copyResultHandler}>复制结果</Button>
					<Button onClick={clearHandle}>清空内容</Button>
				</div>
			</footer>
		</div>
	)
}
export default List